<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>登录</title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/base.css" />
		<link rel="stylesheet" href="css/denglu.css" />
		<script src="js/jquery-3.1.1.js"></script>
		<script src="js/flexible.js"></script>
		<script src="js/mui.min.js"></script>
		<script src="js/config.js"></script>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">

			<h1 class="mui-title">登录</h1>
			<!--<a class=" mui-icon mui-icon-reload mui-pull-right" style="color: #000;"></a>-->
		</header>
		<form class="mui-input-group">
			<div class="mui-input-row">
				<label style="background:url(image/icon/login_Tablet@2x.png) no-repeat;background-size: contain;"></label>
				<input type="text" placeholder="请输入手机号" id="phone">
			</div>
			<div class="mui-input-row">
				<label style="background: url(image/icon/login_Lock@2x.png)no-repeat;background-size: contain;"></label>
				<input id="password" type="password" placeholder="请输入密码">
			</div>
		</form>
		<div class="getpassword">
			<div class="mui-pull-left">
				<span id="getPassword" class="dui"></span>
				<span  style="font-size: 0.35rem;">记住密码？</span>
			</div>
			<span id="foget" class="mui-pull-right" style="margin-top: 0.4rem;font-size: 0.35rem;display: block;">忘记密码？</span>
		</div>
		<div class="mui-content" style="background: none;padding-top: 0;margin-top: 1.5rem;">
			<div class="mui-content-padded">
				<button type="button" class="mui-btn mui-btn-primary mui-btn-block" id="btn" style="font-size: 0.4rem;">登录</button>
			</div>
		</div>
		<script>
			$("#phone").blur(function() {
				var phone = $('#phone').val();
				// alert(phone);
				var reg = /^1[3|4|5|8|7|9|6][0-9]\d{8}$/;
				if(phone == "" || !reg.test(phone)) {
					mui.toast("请正确填写手机号码");
					return;
				}
			})
			$("#btn").on('tap', function() {
				var phone = $("#phone").val()
				var password = $("#password").val()
				mui.ajax(config.host + '/home/Login/login',{
					data: {
						phone: phone,
						password: password
					},
					dataType: 'json', //服务器返回json格式数据
					type: 'post', //HTTP请求类型	              
					success: function(data) {
						if(data.code == 200) {
							mui.toast(data.msg);
							mui.openWindow({
								url: 'index.html',
								id: 'index'
							})
							localStorage.setItem('token', data.data.token)
						} else {
							mui.toast(data.msg)
						}
					},
					error: function(data) {
						mui.toast(data.msg)
					}
				});
			})
			//wangjimima
			$('#foget').on('tap', function() {
				location.href="forgetpassword.html";
			})
			//记住密码
			$('#password').val(localStorage.getItem('password'));
			$('#phone').val(localStorage.getItem('phone'));
			if(localStorage.getItem('phone')!=null){
				console.log('1');
				$('.mui-pull-left span:nth-child(1)').addClass('duiB');
			}
			mui('.getpassword').on('tap','#getPassword', function() {
				if($(this).hasClass('duiB')){
					$(this).removeClass('duiB');
					localStorage.removeItem('password');
					localStorage.removeItem('phone');
				}else{
					$(this).addClass('duiB');
					localStorage.setItem('password',$('#password').val());
					localStorage.setItem('phone',$('#phone').val());
				}
				
				
			})
		</script>
	</body>

</html>